<template>
  <div>
    <el-link icon="el-icon-back" @click="()=>{this.$router.back()}" style="width:25px;height:25px;font-size:23px;margin:10px 0"></el-link><span style="color:rgba(0,0,0,0.1)"> | </span> {{title}}
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.courseName"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="form.brief"></el-input>
        </el-form-item>
        <el-form-item label="讲师姓名">
          <el-input v-model="form.teacherDTO.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form.teacherDTO.position"></el-input>
        </el-form-item>
        <el-form-item label="讲师简介">
          <el-input v-model="form.teacherDTO.description"></el-input>
        </el-form-item>
        <el-form-item label="课程概述">
          <el-input v-model="form.previewFirstField"></el-input>
          <el-input v-model="form.previewSecondField"></el-input>
        </el-form-item>
        <el-form-item label="课程封面">
          <!-- courseListImg -->
          <el-upload
            class="avatar-uploader"
            action="/boss/course/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccessListImg"
            :before-upload="beforeAvatarUpload"
            :headers="uploadHeader"
          >
            <img v-if="form.courseListImg" :src="form.courseListImg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg格式的文件，大小不能超过100MB
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="解锁封面">
          <!-- <el-input v-model="form.courseImgUrl"></el-input> -->
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="/boss/course/upload"
            :http-request="handleUpload"
          >
            <img v-if="form.courseImgUrl" :src="form.courseImgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg格式的文件，大小不能超过100MB
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="课程排序">
          <el-input v-model="form.sortNum"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>销售信息</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="售卖价格">
          <el-input v-model="form.discounts"></el-input>
        </el-form-item>
        <el-form-item label="商品原价">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="销量">
          <el-input v-model="form.sales"></el-input>
        </el-form-item>
        <el-form-item label="活动标签">
          <el-input v-model="form.discountsTag"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>秒杀信息</span>
      </div>
      <el-switch
        inactive-text="限时秒杀开关"
        v-model="form.activityCourse"
        active-color="#13ce66"
        inactive-color="#ff4949"
      ></el-switch>
      <br />
      <el-form ref="form" :model="form" label-width="80px" style="margin-top:28px" v-if="form.activityCourse">
        <el-form-item label="开始时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.activityCourseDTO.beginTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.activityCourseDTO.endTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="秒杀价">
          <el-input
            v-model="form.activityCourseDTO.amount"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="秒杀库存">
          <el-input v-model="form.activityCourseDTO.stock"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>课程详情</span>
      </div>
      <text-editor v-model="form.courseDescriptionMarkDown" ref="textEditor"/>
    </el-card>
    <br />
  <el-button type="primary" @click="onSave">保存</el-button>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { getCourseById, saveOrUpdateCourse, upload } from '@/service/crouse'
import textEditor from '@/components/TextEditor/index.vue'
export default Vue.extend({
  name: 'editCourse',
  components: {
    textEditor
  },
  data () {
    return {
      form: {
        teacherDTO: {},
        activityCourseDTO: {},
        courseImgUrl: '',
        courseListImg: '',
        activityCourse: false,
        id: '',
        courseDescriptionMarkDown: ''
      },
      title: '新增课程',
      uploadHeader: {}
    }
  },
  async mounted () {
    this.uploadHeader = {
      Authorization: this.$store.state.user.access_token
    }
    if (this.$route.params.id !== '-1' && this.$route.params.id !== undefined) {
      this.form.id = this.$route.params.id
      const { data } = await getCourseById({ courseId: this.$route.params.id })
      if (data.code === '000000') {
        if (data.data.activityCourseDTO === null) {
          data.data.activityCourseDTO = {}
        }
        this.form = data.data;
        (this.$refs.textEditor as any).init(this.form.courseDescriptionMarkDown)
      }
    } else {
      (this.$refs.textEditor as any).init('')
    }
  },
  methods: {
    handleAvatarSuccessImgUrl (res: any) {
      if (res.code === '000000') {
        this.form.courseImgUrl = res.data.name
      }
    },
    handleAvatarSuccessListImg (res: any) {
      if (res.code === '000000') {
        this.form.courseListImg = res.data.name
      }
    },
    beforeAvatarUpload (file: File) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 100

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 100MB!')
      }
      return isJPG && isLt2M
    },
    async onSave () {
      const { data } = await saveOrUpdateCourse({ ...this.form })
      if (data.code === '000000') {
        this.$message.success(data.mesg)
      } else {
        this.$message.error(data.mesg)
      }
    },
    async handleUpload (options:any) {
      console.log(options)
      const fd = new FormData()
      fd.append('file', options.file)
      const { data } = await upload(fd)
      if (data.code === '000000') {
        this.form.courseImgUrl = data.data.name
      }
    }
  }
})
</script>
<style lang="scss" scoped>
::v-deep .avatar-uploader  .el-upload {
  border: 1px dashed #000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader  .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
